
<style type="text/css">
	.field-container {
	}
	.field-container ul {
		overflow-y: auto;
		border: 1px solid #ccc;
		padding: 5px 0 0 0;
		list-style-type: none;
	}
	.field-container label {
		color: #008571;
		font-weight: bold;
	}
	.field-container li {
		margin: 0px 5px 5px 5px;
		padding: 5px;
		border: 1px solid #ccc;
		border-radius: 5px;
		background-color: #daffff;
		width: auto;
		min-width: 150px;
	}
	.field-remove {
		color: #777;
		font-size: 14px;
		float: right;
		margin: 0px;
		cursor: pointer;
	}
	.field-remove:after {
		content: "x";
	}
	.field-name {
		font-weight: 600;
	}
	.field-type {
    float: right;
    font-style: italic;
	}
	.all-fields {
		height: 300px;
	}
	.keys-fields > ul {
		height: 147px;
	}
	.keys-fields .field-type,
	.values-fields .field-type {
		display: none;
	}
	.field-container .keys-fields > label:nth-child(2),
	.field-container .values-fields > label:nth-child(2) {
		display: none;
	}
	.field-container.field-drag .keys-fields:not(.field-drag-acceptable) > ul,
	.field-container.field-drag .values-fields:not(.field-drag-acceptable) > ul {
		opacity: 0.5;
	}
	.field-container.field-drag .keys-fields:not(.field-drag-acceptable) > label:first-child,
	.field-container.field-drag .values-fields:not(.field-drag-acceptable) > label:first-child {
		display: none;
	}
	.field-container.field-drag .keys-fields:not(.field-drag-acceptable) > label:nth-child(2),
	.field-container.field-drag .values-fields:not(.field-drag-acceptable) > label:nth-child(2) {
		color: #ff0000;
		font-weight: 400;
		display: inline-block;
	}
	.fields-link {
		color: #337ab7;
		cursor: pointer;
    display: inline-block;
    font-size: 0.95em;
    font-weight: 300;
    position: absolute;
    right: 20px;
    top: 3px;
	}
	.fields-link:hover {
		color: #286090;
		text-decoration: underline;
	}
	.all-fields.numeric-only > [data-field-type="string"] {
    display: none;
	}
</style>
<div class="container col-sm-12">
	<div class="row">
		<div class="form-group col-sm-12" style="padding-right:10px;">
			<label for="title{{prefix}}">Title:</label>
			<input type="text" class="form-control" id="title{{prefix}}" name="title" value="{{this.options.get("title") or ""}}">
		</div>
	</div>
	<div class="field-container row">
		<div class="col-sm-6" style="padding: 0px 5px 0px 0px;">
			<label>Fields:</label> <span class="fields-link">Show only numeric columns</span>
			<input type="text" class="options-fields-search form-control input-sm" placeholder="Search/Filter Fields">
			<ul id="allFields{{prefix}}" class="all-fields">
				{%for field in fieldNamesAndTypes%}
				<li id="field{{prefix}}-f{{fieldNames.index(field.0)+1}}" class="field{{prefix}}" data-field="{{field.0}}" data-field-type="{{field.1}}">
					<span class="field-name">{{field.0}}</span>
					<span class="field-type">{{field.1}}</span>
					<a class="field{{prefix}}-remove"></a>
				</li>
				{%endfor%}
			</ul>
		</div>
		<div class="col-sm-6" style="padding: 0px 0px 0px 5px;">
			{%if keyFieldsSupported %}
			<div class="keys-fields">
				<label>Keys: <i class="fa fa-question-circle" title="Controls the X-Axis of the chart. Rows will be grouped by Key columns. Columns may be numeric or string."></i></label>
				<label>Keys: Only numeric or string columns are supported <i class="fa fa-warning"></i></label>
				<ul id="keyFields{{prefix}}">
					{%if this.options.get("keyFields") is not none%}
					{%for fieldName in this.options.get("keyFields").split(",")%}
						{%if fieldName in fieldNames%}
							<li id="field{{prefix}}-f{{fieldNames.index(fieldName)+1}}-keyFields{{prefix}}" data-field="{{fieldName}}">{{fieldName}}<a class="field{{prefix}}-remove field-remove"></a></li>
						{%endif%}
					{%endfor%}
					{%endif%}
				</ul>
			</div>
			{%endif%}
			<div class="values-fields">
				<label>Values: <i class="fa fa-question-circle" title="Controls the Y-Axis of the chart. Values must be numeric columns."></i></label>
				<label>Values: Only numeric columns are supported <i class="fa fa-warning"></i></label>
				{%if keyFieldsSupported %}
				<ul id="valueFields{{prefix}}" style="height: 147px;">
				{%else%}
				<ul id="valueFields{{prefix}}" style="height: 330px;">
				{%endif%}
					{%if this.options.get("valueFields") is not none%}
					{%for fieldName in this.options.get("valueFields").split(",")%}
						{%if fieldName in fieldNames%}
							<li id="field{{prefix}}-f{{fieldNames.index(fieldName)+1}}-valueFields{{prefix}}" data-field="{{fieldName}}">{{fieldName}}<a class="field{{prefix}}-remove field-remove"></a></li>
						{%endif%}
					{%endfor%}
					{%endif%}
				</ul>
				{%if keyFieldsSupported %}
				<span style="font-size:smaller" id="warnEmptyValueFields{{prefix}}">PixieDust will automatically use count aggregation for each key</span>
				{%endif%}
			</div>
		</div>
	</div>
	<div class="row">
		{%block aggField%}
		{%if aggregationSupported %}
		<div class="col-sm-4" style="padding: 0px 0px 0px 5px;">
			<div class="form-group">
				<label class="field">Aggregation:</label>
				<select class="form-control" name="aggregation" style="margin-left: 0px;">
					{%for aggregationOption in aggregationOptions%}
					<option value="{{aggregationOption}}"{{' selected' if this.options.get("aggregation") == aggregationOption}}>{{aggregationOption}}</option>
					{%endfor%}
				</select>
			</div>
		</div>
		{%endif%}
		{%endblock%}
		<div class="col-sm-4" style="padding: 0px 5px 0px 5px;">
			<div class="form-group">
				<label class="field"># of Rows to Display:</label>
				<input id="rows-count" class="form-control" name="rowCount" type="number" min="1" max="10000" value="{{this.options.get("rowCount") or 500}}">
			</div>
		</div>
		{%block customFormFields%}{%endblock%}
	</div>
</div>